import { useContext } from 'react';
import { ListContext } from '.';

function ListItem(props) {
  //获取爷组件提供的上下文对象
  const { toggleTodo, removeTodo } = useContext(ListContext);

  const { data } = props;

  return (
    <div>
      <li>
        <input
          type="checkbox"
          checked={data.completed}
          onChange={() => toggleTodo(data.id)}
        />
        <span style={{ textDecoration: data.completed ? 'line-through' : '' }}>
          {data.content}
        </span>
        <button onClick={() => removeTodo(data.id)}>REMOVE</button>
      </li>
    </div>
  );
}

export default ListItem;
